<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坐标轴</title>
    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 300;     // 画布宽
        let boxHeight = 300;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight);    // 设置高度

        /*
        * 要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。
        */

        // 定义比例尺
        let dataSet = [2.5 , 2.1 , 1.7 , 1.3 , 0.9];
        let max = d3.max(dataSet); // 获取最大值
        let xLiner = d3.scaleLinear()
            .domain([0, max]) // 定义域
            .range([0, 250]); //值域

        let yLiner = d3.scaleLinear()
            .domain([0, 250])
            .range([250, 0]);

        // 坐标轴
        /* d3.axisBottom(scale)
        *       使用给定的 scale 构建一个刻度在下的坐标轴生成器,
        *       默认 tick arguments 为空, tick size 为 6， padding 为 3. 坐标轴为水平方向
        * */
        let xAxis = d3.axisBottom(xLiner)
            .ticks(7); // 指定刻度的数量

        let yAxis = d3.axisLeft(yLiner)
            .ticks(7);

        // 在svg添加坐标轴
        // X轴
        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(30, 270)')
            .call(xAxis);
        // Y轴
        svg.append('g')
            .attr('class', 'axis')
            .attr('transform', 'translate(30, 20)')
            .call(yAxis);

        /*
        * 上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。
        * */
    </script>
</body>
</html>